<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>VueJs指令：v-on：keydown</title>
</head>
<body>

<div id="app">
  <textarea name="" cols="30" rows="10" maxlength="140" @keydown="keydowncontent" @keyup="keydowncontent" id="content"></textarea>
  <span>你可以输入{{size}}字</span>
</div>

<script src="js/vue.min.js"></script>
<script>

  // 案例：输入数字，只能属于140个文字，告诉用户已经输入多少文字
  // 事件类型：keydown keyup
  // 语法：vue：v-on:keydown="keydowncontent" @keydown="keydowncontent"
  var app = new Vue({
    el:"#app",
    data:{
      size:0
    },
    methods:{
      keydowncontent:function(){
        // 1: 这里就获取用户已经输入的文字
        var content = document.getElementById("content").value;
        // 2: 用140减去输入的文字，得到的剩下还可以属于的文字
        var csize = 140 - content.length;
        // 3: 改变数据可以改变视图
        this.size = csize;
      }
    }
  });
</script>
</body>
</html>